<script setup lang="ts">
import { useRoute, useData } from 'vitepress';
import { useCopyCode } from '../composables/copy-code.js';
import { useSidebar } from '../composables/sidebar.js';
import Theme from '@theme/index';
import VPPage from './VPPage.vue';
import VPHome from './VPHome.vue';
import VPDoc from './VPDoc.vue';
import { ref } from 'vue';
import VPFooter from './VPFooter.vue';

const route = useRoute();
const { frontmatter } = useData();
const { hasSidebar } = useSidebar();

const NotFound = Theme.NotFound || (() => '404 Not Found');

const showVideo = ref(false);
const openVideo = () => {
    showVideo.value = true;
    document.documentElement.style.overflow = 'hidden';
};
const closeVideo = () => {
    showVideo.value = false;
    document.documentElement.style.overflow = 'auto';
};

useCopyCode();
</script>

<template>
    <div
        class="VPContent"
        id="VPContent"
        :class="{
            'has-sidebar': hasSidebar,
            'is-home': frontmatter.layout === 'home',
            'is-doc':route.component != NotFound&&frontmatter.layout !== 'page'&&frontmatter.layout !== 'home'
        }"
    >
        <NotFound v-if="route.component === NotFound" />

        <VPPage v-else-if="frontmatter.layout === 'page'" />

        <VPHome v-else-if="frontmatter.layout === 'home'">
            <template #home-hero-before><slot name="home-hero-before" /></template>
            <template #home-hero-after><slot name="home-hero-after" /></template>
            <template #home-features-before><slot name="home-features-before" /></template>
            <template #home-features-after
                ><slot name="home-features-after" />
                <div class="farris-docs-features-after">
                    <div class="farris-docs-features-after--content">
                        <h3>Farris Design</h3>
                        <div class="detail">
                            <p>数字化时代，是一个体验经济的时代，</p>
                            <p>为了让企业用户享受到极致的用户体验，浪潮数字企业融合最新设计趋势，通过大量产品实践和总结，</p>
                            <p>推出服务于企业级产品的设计体系Farris Design</p>
                        </div>
                        <button class="farris-doc-btn btn-video" @click="openVideo"><span class="video-text">观看视频介绍</span></button>
                    </div>

                    <div class="farris-docs-features-after--left-bg"></div>
                </div>
            </template>
        </VPHome>

        <VPDoc v-else>
            <template #doc-footer-before><slot name="doc-footer-before" /></template>
            <template #doc-before><slot name="doc-before" /></template>
            <template #doc-after><slot name="doc-after" /></template>

            <template #aside-top><slot name="aside-top" /></template>
            <template #aside-outline-before><slot name="aside-outline-before" /></template>
            <template #aside-outline-after><slot name="aside-outline-after" /></template>
            <template #aside-ads-before><slot name="aside-ads-before" /></template>
            <template #aside-ads-after><slot name="aside-ads-after" /></template>
            <template #aside-bottom><slot name="aside-bottom" /></template>
        </VPDoc>
        <VPFooter mustShow="true" v-if="route.component != NotFound&&frontmatter.layout !== 'page'&&frontmatter.layout !== 'home'"></VPFooter>
    </div>

    <Teleport to="body">
        <Transition name="video" enter-active-class="video-enter-active" leave-active-class="video-leave-active">
            <div class="video-modal-dialog" v-if="showVideo">
                <div class="bg" @click="closeVideo"></div>
                <div class="content">
                    <div class="video-wrapper">
                        <span class="close-icon" @click="closeVideo"></span>
                        <video autoplay controls loop height="100%">
                            <source src="/assets/video/video01.mp4" ype="video/mp4" />
                        </video>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<style scoped>
.video-enter-active {
    animation: videoIn 0.8s ease-in;
}
.video-leave-active {
    animation: videoOut 0.8s ease-out;
}
@keyframes videoIn {
    form {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes videoOut {
    form {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.video-modal-dialog {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    bottom: 0;
    z-index: 1000;
}
.video-modal-dialog .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.25);
}
.video-modal-dialog .content {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
}
.video-modal-dialog .video-wrapper {
    position: relative;
    max-width: var(--vp-layout-max-width);
    height: 70vh;
    max-height: 800px;
    margin-top: 10vh;    
    border-radius: 36px;
}
.video-modal-dialog .video-wrapper video{
    border-radius: 36px;    
    overflow: hidden;
}
.close-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: var(--vp-z-index-sidebar);
    top: -24px;
    right: 0;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 20px;
    background: url('/assets/video/close.png') no-repeat;
    background-size: contain;
}
.close-icon:hover{
    opacity:1;
    box-shadow: 1px 1px 12px 0px rgba(255,255,255,0.5);
}

.VPContent {
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0 auto;
    width: 100%;
}
/**可能会影响文档右侧浮动导航的定位 */
.VPContent.is-doc{
    display: flex;
    flex-direction: column;
}
.VPContent.is-doc .VPDoc{
    flex:1 1 0;
}

.VPContent.is-home {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 960px) {
    .VPContent {
        padding-top: var(--vp-nav-height);
    }

    .VPContent.has-sidebar {
        margin: 0;
        padding-left: var(--vp-sidebar-width);
        /* background-color: rgba(255, 255, 255, 0.7); */
    }
}

@media (min-width: 1440px) {
    .VPContent.has-sidebar {
        /* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)); */
    }
}

/**背景图 */
.farris-docs-features-after--left-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 664px;
    background-image: url('/assets/bg-video-left.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}
/* .farris-docs-features-after--bottom-bg {
    height: 90px;
    width: 100%;
    background-size: cover;
    background-image: url('/assets/bg-footer.png');
} */
.farris-docs-features-after {
    text-align: center;
    position: relative;
    overflow: hidden;
}
.farris-docs-features-after--content {
    margin: 0 auto;
    padding: 60px 0 140px;
    background-image: url('/assets/bg-video-center.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.farris-docs-features-after h3 {
    font-size: 50px;
    color: var(--character-title-text);
    line-height: 56px;
    margin: 0 0 20px;
}
.farris-docs-features-after .detail {
    padding-bottom: 40px;
}

.btn-video {
    padding: 0 30px 0 60px;
}
.btn-video::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 30px;
    border-left: 14px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    z-index: 5;
    margin-top: -8px;
    border-radius: 2px;
}
</style>
